<template>
  <div>
    <div class="echarts_cover">
      <!-- <h2 class="nav_title">可视化界面</h2> -->

      <!-- 第一张关于学历占比的可视化图表 -->
      <div class="center_cover">
        <div
          class="echarts1"
          id="main"
        
          v-if="series != []"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { sendEchartsStructure } from "@/api/data";
export default {
  data() {
    return {
      options1: [],
      dialogFormVisible: false,
      form: {
        work_biye_time: "",
        work_xueli: "",
        work_jiuye: "",
        work_zhuanye: [],
      },
      formLabelWidth: "120px",
      series: [],
    };
  },
  async mounted() {

    let data1 = sessionStorage.getItem("echarts1");
    if (data1) {
      this.series = JSON.parse(data1);
      this.xuanran();
      return;
    }

    let data = await sendEchartsStructure();

    let arr1 = [0, 0, 0, 0, 0];
    let series = data.data;
    for (let i = 0; i < series.length; i++) {
      for (let j = 0; j < series[i].data.length; j++) {
        arr1[j] += series[i].data[j];
      }
    }

    for (let i = 0; i < series.length; i++) {
      for (let j = 0; j < series[i].data.length; j++) {
        series[i].data[j] = this.toPercent(series[i].data[j] / arr1[j]);
      }
    }

    this.series = series;
    sessionStorage.setItem("echarts1", JSON.stringify(series));
    this.xuanran();
    
  },
  methods: {
    // 将小数转为百分数
    toPercent(point) {
      var str = Number(point * 100).toFixed(2);
      str;
      return str;
    },
    // 渲染第一张图表
    xuanran() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "学历占比(%)",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["本科", "研究生", "博士"],
        },
        grid: {
          left: "6%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
          toolbox: {
          show: true,
          orient: "vertical",
          left: "left",
          top: "center",
            feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: this.$store.getters.isShow },
          },
        
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2016", "2017", "2018", "2019", "2020"],
        },
        yAxis: {
          type: "value",
        },
        series: this.series,
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

  },
};
</script>

<style lang="scss" scoped>
.echarts_cover {
  height: calc(100vh -120px);
  text-align: center;
  padding: 50px 20px;
  position: relative;
}

.center_cover {
  display: flex;
  justify-content: center;
}
.echarts1{
  width: 700px;
  height: 400px;
  margin-left: 30px;
}

.btn1 {
  margin-left: 20px;
  // margin-top: 20px;
  height: 35px;
}
</style>